<template>
  <div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称" >
            <span>{{ props.row.goodname }}</span>
          </el-form-item>
          <el-form-item label="订单用户名称" >
            <span>{{ props.row.username }}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{ props.row.paytype }}</span>
          </el-form-item>
          <el-form-item label="商品 ID" >
            <span>{{ props.row.goodId }}</span>
          </el-form-item>
          <el-form-item label="商品价格" >
            <span>{{ props.row.goodprice }}</span>
          </el-form-item>
          <el-form-item label="商品分类" >
            <span>{{ props.row.goodcategory }}</span>
          </el-form-item>

          <el-form-item label="订单创建时间" >
            <span>{{ formatDate(props.row.createtime) }}</span>
          </el-form-item>
          
          <el-form-item label="商品描述" >
            <span>{{ props.row.gooddescription }}</span>
          </el-form-item>
          <el-form-item  label="是否购买" >
              <span>{{props.row.shopstatic==1?"已购买":"未支付"}}</span>
          </el-form-item>
          <el-form-item label="操作">
            <!-- <el-button type="danger" size="mini" @click="Deleteorder(props.row.id)">删除</el-button> -->




            <el-popconfirm
                    confirm-button-text="好的"
                    cancel-button-text="不用了"
                    icon="el-icon-info"
                    icon-color="red"
                    title="你确定移除该订单吗？"
                    @confirm="Deleteorder(props.row.id)"
                  >
                    <el-button slot="reference" type="danger" size="medium" style="margin-top: 20px;">删除订单</el-button>
                  </el-popconfirm>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="goodId" calss="column-header">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="goodname" calss="column-header">
    </el-table-column>
    <el-table-column
      label="商品分类"
      prop="goodcategory" calss="column-header">
    </el-table-column>
  </el-table>
</div>
</template>



<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form--inline .el-form-item__label {
   font-size: 14px;
   font-weight: bold;
   color: #000000;
}
</style>








<!--   <script>
    export default {
      data() {
        return {
          activeNames: ['1']
        };
      },
      methods: {
        handleChange(val) {
          console.log(val);
        }
      }
    }
  </script> -->









  <script>
import request from '@/request/request.js';
  
  export default {
    data() {
      return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        tableData: []
      }
    },
  methods:{
    formatDate(date) {
      return new Date(date).toLocaleString();
    },
    getBossOrder(id){
  request.get("/order/boss/"+id).then((res) => {
    if (res.code === "0") {
      this.tableData = res.data;
      console.log(this.tableData);
    }
  });
},
Deleteorder(id){
  request.delete("/order/"+id).then((res) => {
    if (res.code === "0") {
      this.getBossOrder(this.user.id);
    }
  });

},
  },
  created() {
    this.getBossOrder(this.user.id);
  },
  }
</script>